<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台管理主页</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="/css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="/img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <!-- JavaScript files-->
    <script src="/vendor/jquery/jquery.min.js"></script>
    <script src="/vendor/popper.js/umd/popper.min.js"> </script>
    <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="/vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="/vendor/chart.js/Chart.min.js"></script>
    <script src="/vendor/jquery-validation/jquery.validate.min.js"></script>
    <script src="/js/charts-home.js"></script>
    <!-- Main File-->
    <script src="/js/front.js"></script>

    <script>
      $(function(){
        $(".common_header").load('_header.html');
        $(".common_sidebar").load('_sidebar.html');

        $.ajax({
          url: "/customerbackend/getAllCinemas",
          data:{
            db: ""
          },
          type: "get",
          success: function(data) {
            var content = "";
            for(var i = 0; i < data.length; i++) {
              var po = data[i];
              content += " <div class=\"col-md-4\" style=\"float:left\">\n" +
                      "                    <div class=\"client card\">\n" +
                      "                      <div class=\"card-close\">\n" +
                      "                        <div class=\"dropdown\">\n" +
                      "                          <button type=\"button\" id=\"closeCard2\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" class=\"dropdown-toggle\"><i class=\"fa fa-ellipsis-v\"></i></button>\n" +
                      "                          <div aria-labelledby=\"closeCard2\" class=\"dropdown-menu dropdown-menu-right has-shadow\"><a href=\"#\" class=\"dropdown-item remove\"> <i class=\"fa fa-times\"></i>删除</a></div>\n" +
                      "                        </div>\n" +
                      "                      </div>\n" +
                      "                      <div class=\"card-body text-center cinema_ctn\">\n" +
                      "                        <div class=\"client-avatar\"><img src=\"/img/default.png\" alt=\"...\" style=\"width: 100px; height: 100px;\" class=\"img-fluid rounded-circle\">\n" +
                      "                          <div class=\"status bg-green\"></div>\n" +
                      "                        </div>\n" +
                      "                        <div class=\"client-title\">\n" +
                      "                          <h3>" + po.cinema_name + "</h3><span>" + po.cinema_address + "" +
                      "</span><a href=\"javascript:void(0)\" onclick=\"showCinemaHall("+po.cinema_id+")\">查看影厅</a>\n" +
                      "</span><a href=\"javascript:void(0)\" data-toggle=\"modal\" data-target=\"#myModal\" onclick=\"passVal(" + po.cinema_id  + ")\">添加影厅</a>\n" +
                      "                        </div>\n" +
                      "                        <div class=\"client-info\">\n" +
                      "                          <div class=\"row\">\n" +
                      "                          </div>\n" +
                      "                        </div>\n" +
                      "                      </div>\n" +
                      "                    </div>\n" +
                      "                  </div>"
            }
            $('#cinemas').html(content);
          }
        });

      });

      function showCinemaHall(cinema_id) {
        $.ajax({
          url: "/customerbackend/getCinemaHallByCid",
          type: "get",
          data:{
            cinema_id : cinema_id
          },
          success:function(data) {
            var content = "";
            $("#cinemahall_seat") .html(content);
            if(data.length == 0) {
              content+= " <div class=\"statistic d-flex align-items-center bg-white has-shadow\">\n" +
                      "                   <div class=\"text\"><strong>这分院下面没有任何影厅</strong><br><small>请先去添加几个影厅试试吧</small></div>\n" +
                      "                  </div>";
            } else {
              for (var i = 0; i < data.length; i++) {
                var po = data[i];
                if(po.os_id != 0) {
                  content += "<div class=\"statistic d-flex align-items-center bg-white has-shadow col-lg-12 col-12\" onclick=\"getSeats(" + po.os_id + ")\">\n" +
                          "                    <div class=\"text\"><strong>" + po.ch_name + "</strong><br>";
                    content += "<small>最大容量：" + po.ch_capacity + "人</small>"
                  content += "</div>\n" +
                          "                  </div>";
                } else {
                  content += "<div class=\"statistic d-flex align-items-center bg-white has-shadow col-lg-12 col-12\" onclick=\"SeatTempNotice(" + po.ch_id + ")\">\n" +
                          "                    <div class=\"text\"><strong>" + po.ch_name + "</strong><br>";
                  content += "<small>您还未设置影厅布局，请点击来进行设置</small>"
                  content += "</div>\n" +
                          "                  </div>";
                }
              }
            }
            $('#cinemahall').html(content);
          }
        });
      }
    </script>

    <style>
      .cinema_ctn{
        height: 430px;
      }

      .hall {
        display: inline-block;
        vertical-align: top;
      }

      .seat-block{
        font-size: 0;
        overflow: hidden;
        margin-left: 20px;
        margin-right: 20px;
        white-space: nowrap;
      }

      .row-id-container{
        width: 20px;
        float: left;
        margin-top: 112px;
        white-space: normal;
      }

      .row-id {
        font-size: 16px;
        color: #999;
        margin-right: 40px;
        margin-bottom: 10px;
        display: inline-block;
        width: 20px;
        height: 26px;
        line-height: 29px;
        text-align: center;
      }

      .seat-container {
        margin-left: 50px;
        overflow: auto;
        position: relative;
        padding-top: 112px;
      }

      .screen-container {
        display: inline-block;
        position: absolute;
        top: 0;
        bottom: 0;
      }

      .screen {
        padding-top: 50px;
        text-align: center;
        font-size: 16px;
        color: #666;
        background-position-x: center;
        position: relative;
        margin-bottom: 40px;
      }

      .c-screen-line {
        width: 0;
        border-left: 1px dashed #e5e5e5;
        position: absolute;
        top: 90px;
        bottom: 0;
        left: 50%;
      }

      .seats-wrapper{
        display: inline-block;
      }

      .row{
        white-space: nowrap;
        margin-bottom: 10px;
        text-align: center;
      }

      .seat{
        font-size: 0;
        width: 30px;
        height: 26px;
        margin: 0 5px;
        background: url("img/seat_default.png") no-repeat 0 1px;
        background-size: 100% 100%;
      }

      .empty {
        background-image: none;
      }

      .is_a {
        opacity:1;
      }

      .not_a {
        opacity:0.2;
      }

      .btn_ctn{
        margin-top: 3px;
        margin-bottom: 3px;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <!-- 引出公用的header -->
      <div class="common_header">
      </div>

	
	  
      <div class="page-content d-flex align-items-stretch">
        <!-- 引出公用的sidebar -->
        <nav class="side-navbar common_sidebar">

        </nav>

        <div class="content-inner">
          <header class="page-header">
            <div class="container-fluid">
              <h2 class="no-margin-bottom">控制台</h2>
            </div>
          </header>

          <!-- Dashboard Counts Section-->
          <section class="dashboard-counts no-padding-bottom" style="overflow:hidden;">
            <div class="container-fluid">
              <div class="col-md-12">
                <div id="cinemas">
                <!-- 影院模版 -->
                </div>
                <!-- 添加分院 -->
                <div class="col-md-4" style="float:left">
                  <div class="client card">
                    <div class="card-body text-center cinema_ctn">
                      <div class="client-avatar"><img src="/img/default.png" alt="..." style="width: 100px; height: 100px;" class="img-fluid rounded-circle">
                        <div class="status bg-green"></div>
                      </div>
                      <div class="client-title">
                        <h3>分院名</h3><span>分院地址</span>
                        <a href="javascript:void(0)" data-toggle="modal" data-target="#cinema_modal">新增分院</a>
                      </div>
                      <div class="client-info">
                        <div class="row">
                          <div class="col-12"><strong></strong></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 影厅 -->
              </div>
            </div>
          </section>

          <!-- Cinema hall Section -->
          <section class="dashboard-header">
            <div class="container-fluid">
                <!-- 影厅布局模版 -->
                <div class="statistics col-lg-12" id="cinemahall">

                </div>
            </div>
          </section>

          <!-- 座位布局section -->
          <section>
            <!-- 替换模版用 -->
            <div class="text-center" style= "width: 80%; margin: auto;" id="cinemahall_seat">
            </div>
          </section>
        </div>

        <!-- 模态框（Modal） 给分院用 -->
        <div class="modal fade" id="cinema_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  &times;
                </button>
              </div>
              <div class="modal-body">
                <input type="hidden" id="hidden_value_for_company_id" name="hidden_value_for_company_id" value="">
                <label>请输入分院名:</label>
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="分院名" id="temp_cinema_name" name="temp_cinema_name">
                </div>
                <label>请输入分院地址:</label>
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="分院地址" id="temp_cinema_address" name="temp_cinema_address">
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="createNewCinema()">
                  确认添加
                </button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal -->
        </div>

        <!-- 模态框（Modal） 给分厅用 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  &times;
                </button>
              </div>
              <div class="modal-body">
                <input type="hidden" id="hidden_value" name="hidden_value" value="">
                <label>请输入厅名:</label>
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="厅名" id="temp_ch_name" name="temp_ch_name">
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="createNewCinemaHall()">
                    确认添加
                </button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal -->
        </div>

      </div>
    </div>

    <script>
      // 实现声明数组
      var temp = new Array();

      // 用来获取座位结构
      function getSeats(os_id) {
        // 用ajax接收前端布局
        $.ajax({
          url: "/customerbackend/getCinemaOriginalSeats",
          data:{
            db: null,
            os_id: os_id
          },
          type: "get",
          success: function(data) {
            // 接收前先清空temp
            temp = new Array();

            var content = "";
            var colLength = data.cinemaOriginalSeatsRows.length;
            var rowLength = data.cinemaOriginalSeatsRows[0].length;

            //var temp = new Array();
            for(var col = 0; col < colLength; col ++) {
              temp[col] = new Array();
              for (var row = 0; row < rowLength; row++) {
                temp[col][row] = parseInt(data.cinemaOriginalSeatsRows[col].substr(row, 1));
              }
            }
            console.log(temp);

            content+="              <div class=\"hall bg-white has-shadow\">\n" +
                    "                <div class=\"seat-block\">\n" +
                    "                  <div class=\"row-id-container\">\n"
            for (var tempV = 0; tempV < colLength; tempV++) {
              content+= "                    <span class=\"row-id\">" + (tempV + 1) + "</span>\n";
            }
            content += "                  </div>\n" +
                    "\n" +
                    "                  <div class=\"seat-container\">\n" +
                    "                     <div class=\"screen-container col-lg-12\" style=\"left: 0px;\">\n" +
                    "                       <div class=\"screen\"> <span> 银幕中央 </span> </div>\n" +
                    "                       <div class=\"c-screen-line\"> </div>\n" +
                    "                     </div>\n" +
                    "\n" +
                    "                    <div class=\"seats-wrapper col-lg-12\">\n";

            for (var j = 0; j <  colLength; j++) {
              content += "                      <div class=\"row\">\n";
              for(var k = 0; k < rowLength; k ++ ){
                if(temp[j][k] == 0) {
                  content +=   "                        <span class=\"seat not_a\" data-col-id=\""+ (j + 1) +"\" data-row-id=\""+ (k + 1) +"\"> </span>\n";
                } else if (temp[j][k] == 1) {
                  content +=   "                        <span class=\"seat is_a\" data-col-id=\""+ (j + 1) +"\" data-row-id=\""+ (k + 1) +"\"> </span>\n";
                }
              }
              content += "                      </div>\n";
            }
            content +=
                    "                    </div>\n" +
                    "                  </div>\n" +
                    "                </div>\n" +
                    "                <div class=\"btn_ctn\">\n" +
                    "                  <button class=\"btn btn-primary\" onclick=\"SaveSeats("+ data.cinemaOriginalSeats.os_id  +") \"> 保存 </button>\n" +
                    "                  <button class=\"btn btn-primary\"> 抛弃 </button>\n" +
                    "                </div>\n" +
                    "              </div>\n"

            $('#cinemahall_seat').html(content);
          }
        });
      }

      // 生成提示信息
      function SeatTempNotice(ch_id) {
        var content = "";
        content+= "  <!-- 自定义影院规模 -->\n" +
                "              <div class=\"statistic d-flex align-items-center bg-white has-shadow col-lg-12\" style=\"margin-bottom: 20px;\">\n" +
                "                <div class=\"container-fluid\">\n" +
                "                <div class=\"col-lg-12\">\n" +
                "                  <p>请输入需要生成的影厅规模</p>\n" +
                "                </div>\n" +
                "                <div class=\"form-group col-lg-12\">\n" +
                "                  <label class=\"form-inline\">行 <br>\n" +
                "                   <input type=\"row\" placeholder=\"行数(最多15行)\" class=\"form-control\" id=\"tempRow\" style=\'width: 80%;\'>\n" +
                "                  </label>\n" +
                "                </div>\n" +
                "                <div class=\"form-group col-lg-12\">\n" +
                "                  <label class=\"form-inline\">列 <br>\n" +
                "                    <input type=\"col\" placeholder=\"列数(最多26列)\" class=\"form-control\" id=\"tempCol\" style=\'width: 80%;\'>\n" +
                "                  </label>\n" +
                "                </div>\n" +
                "                  <div class=\"col-lg-12\">\n" +
                "                    <button style=\"width:100%; margin-top:5px;\" onclick=\'GenerateSeatTemp("+ ch_id +") \' class=\"btn btn-primary\" > 生成 </button>\n" +
                "                  </div>\n" +
                "                </div>\n" +
                "              </div>";
        $("#cinemahall_seat").html(content);

      }

      // 生成模拟的座位图
      function GenerateSeatTemp(ch_id) {
        var tempRow = $("#tempRow").val();
        var tempCol = $("#tempCol").val();
        //alert(tempRow);
        //alert(tempCol);
        // 新建数组
        for(var row = 0; row < tempRow; row ++) {
          temp[row] = new Array();
          for(var col = 0; col < tempCol; col ++) {
            temp[row][col] = 0;
          }
        }
        // 测试生成的二维数组
        console.log(temp);
        // 生成座位表
        var content = "";
        content+="              <div class=\"hall bg-white has-shadow\">\n" +
                "                <div class=\"seat-block\">\n" +
                "                  <div class=\"row-id-container\">\n"
        for (var tempV = 0; tempV < tempRow; tempV++) {
          content+= "                    <span class=\"row-id\">" + (tempV + 1) + "</span>\n";
        }
        content += "                  </div>\n" +
                "\n" +
                "                  <div class=\"seat-container\">\n" +
                "                     <div class=\"screen-container col-lg-12\" style=\"left: 0px;\">\n" +
                "                       <div class=\"screen\"> <span> 银幕中央 </span> </div>\n" +
                "                       <div class=\"c-screen-line\"> </div>\n" +
                "                     </div>\n" +
                "\n" +
                "                    <div class=\"seats-wrapper col-lg-12\">\n";

        for (var j = 0; j <  tempRow; j++) {
          content += "                      <div class=\"row\">\n";
          for(var k = 0; k < tempCol; k ++ ){
            if(temp[j][k] == 0) {
              content +=   "                        <span class=\"seat not_a\" data-col-id=\""+ (j + 1) +"\" data-row-id=\""+ (k + 1) +"\"> </span>\n";
            } else if (temp[j][k] == 1) {
              content +=   "                        <span class=\"seat is_a\" data-col-id=\""+ (j + 1) +"\" data-row-id=\""+ (k + 1) +"\"> </span>\n";
            }
          }
          content += "                      </div>\n";
        }
        content +=
                "                    </div>\n" +
                "                  </div>\n" +
                "                </div>\n" +
                "                <div class=\"btn_ctn\">\n" +
                "                  <button class=\"btn btn-primary\" onclick=\"InsertNewSeats("+ ch_id  +") \"> 保存 </button>\n" +
                "                </div>\n" +
                "              </div>\n"
        $("#cinemahall_seat").html(content);
      }

      // 将模拟好的表插入数据库中
      function InsertNewSeats(ch_id) {
        var newTemp = new Array();
        for(var n = 0; n < temp.length; n++) {
          var temp2 = "";
          for(var m = 0; m < temp[0].length; m++) {
            temp2 += temp[n][m] + "";
          }
          newTemp[n] = temp2;
        }
        $.ajax({
          url: "/customerbackend/insertnewseats",
          traditional:true,
          data:{
            db: null,
            ch_id: ch_id,
            newSeats: newTemp
          },
          type: "post",
          success: function(data) {
            alert(data);
            // 清空temp
            temp = new Array();
          }
        });
      }

      // 另一个入口函数
      $(function(){


        // 测试用数据
        /*
        var arr = new Array();
        for(var row = 0; row < 4; row++) {
          arr[row] = new Array();
          for(var col  = 0; col < 4; col++) {
            arr[row][col] = 0;
          }
        }
        console.log(arr);
         */

        // 这两个是用来操作选择是否有座位的
        $("#cinemahall_seat").on("click",".is_a",function () {
          if($(this).hasClass("not_a")) {
            $(this).removeClass("not_a");
            $(this).addClass("is_a");
            var col = $(this).data("colId") - 1;
            var row = $(this).data("rowId") - 1;
            temp[col][row] = 1;
          } else if ($(this).hasClass("is_a")) {
            $(this).removeClass("is_a");
            $(this).addClass("not_a");
            var col = $(this).data("colId") - 1;
            var row = $(this).data("rowId") - 1;
            temp[col][row] = 0;
          }
          console.log(temp);
        });


        $("#cinemahall_seat").on("click",".not_a",function () {
          if($(this).hasClass("not_a")) {
            $(this).removeClass("not_a");
            $(this).addClass("is_a");
            var col = $(this).data("colId") - 1;
            var row = $(this).data("rowId") - 1;
            temp[col][row] = 1;
          } else if ($(this).hasClass("is_a")) {
            $(this).removeClass("is_a");
            $(this).addClass("not_a");
            var col = $(this).data("colId") - 1;
            var row = $(this).data("rowId") - 1;
            temp[col][row] = 0;
          }
          console.log(temp);
        });
      })

      // 点击按钮保存座位信息
      function SaveSeats(os_id) {
        var newTemp = new Array();
        for(var n = 0; n < temp.length; n++) {
          var temp2 = "";
          for(var m = 0; m < temp[0].length; m++) {
            temp2 += temp[n][m] + "";
          }
          newTemp[n] = temp2;
        }
        console.log(newTemp);

        $.ajax({
          url: "/customerbackend/updateSeats",
          traditional:true,
          data:{
            db: null,
            os_id: os_id,
            newSeats: newTemp
          },
          type: "post",
          success: function(data) {
            alert(data);
          }
        });
      }

      // 添加新影厅赋值用
      function passVal(cinema_id) {
        $("#hidden_value").val(cinema_id);
      }

      // 添加影厅到后台
      function createNewCinemaHall() {
        $.ajax({
          url: "/customerbackend/createNewCinemaHall" ,
          data: {
            db: null,
            cinema_id: $("#hidden_value").val(),
            ch_name: $("#temp_ch_name").val()
          } ,
          type: "post",
          success: function(data) {
            alert(data);
        }
        });
      }

      // 添加新的分院到后台
      function createNewCinema() {
        alert($("#temp_cinema_name").val());
        alert($("#temp_cinema_address").val());
        $.ajax({
          url: "/customerbackend/createNewCinema" ,
          data: {
            db: null,
            cinema_name: $("#temp_cinema_name").val(),
            // 记得以后更改，从浪总那边拿值
            company_id: 1,
            cinema_address: $("#temp_cinema_address").val()
          } ,
          type: "post",
          success: function(data) {
            alert(data);
          }
        });
      }
    </script>
  </body>
</html>
